import React from 'react';
import { inject, observer } from 'mobx-react';
import { Popover } from 'antd';
import { WeaIntro, WeaAvatar } from 'ecCom';

import E9AccountContent from '../E9AccountContent';

const { Step } = WeaIntro;

@inject('portalIntroStore')
@inject('portalThemeStore')
@observer
class IntroStep5 extends React.Component {
  constructor(props) {
    super(props);
    this.onVisibleChange = this.onVisibleChange.bind(this);
  }

  render() {
    const { portalIntroStore, portalThemeStore } = this.props;
    const { account = {}, accountVisible, translatepage } = portalThemeStore;
    const { intro_step } = portalIntroStore;
    const { userid, username, showMore = false } = account;

    if (showMore) {
      return (
        <Popover
          ecId={`${(this && this.props && this.props.ecId) || ''}_Popover@zvl3zq`}
          trigger="click"
          placement="bottomLeft"
          content={
            <Step ecId={`${(this && this.props && this.props.ecId) || ''}_Step@yu0src`} id="portal-intro5">
              <E9AccountContent ecId={`${(this && this.props && this.props.ecId) || ''}_E9AccountContent@0j6quu`} onVisibleChange={this.onVisibleChange} />
            </Step>
          }
          overlayClassName={translatepage == '1' ? 'e9header-account-overlay-tran' : 'e9header-account-overlay'}
          visible={accountVisible}
          onVisibleChange={this.onVisibleChange}
          afterPopupVisibleChange={(v) => intro_step.intro5 && v && setTimeout(() => window.portal_intro.goToStep(5), 150)}
        >
          <div>
            <div className="e9header-account-img">
              <WeaAvatar ecId={`${(this && this.props && this.props.ecId) || ''}_WeaAvatar@0qr9xm`} userId={userid} />
            </div>
            <span className="e9header-account-username">{username}</span>
            <span className="e9header-account-icon">
              <i className="wevicon-account-arrow" />
            </span>
          </div>
        </Popover>
      );
    }

    return (
      <div onClick={() => portalThemeStore.onLoadMain({ mobxrouteurl: '/hrm/card/cardInfo' })}>
        <div className="e9header-account-img">
          <WeaAvatar ecId={`${(this && this.props && this.props.ecId) || ''}_WeaAvatar@4dc2k0`} userId={userid} />
        </div>
        <span className="e9header-account-username">{username}</span>
      </div>
    );
  }

  onVisibleChange(visible) {
    const { portalIntroStore, portalThemeStore } = this.props;
    const { intro_step } = portalIntroStore;
    !intro_step.intro5 && portalThemeStore.onAccountVisibleChange(visible);

    const themeLayoutMask = document.getElementById('themeLayoutMask');
    if (visible) {
      portalThemeStore.getTranslatepower();
      themeLayoutMask.style.display = 'block';
    } else {
      themeLayoutMask.style.display = 'none';
    }
  }
}

export default IntroStep5;
